<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function isObject(value) {
      return typeof value === "object" && value !== null
    }
    /**
     * 创建响应式数据
     * @param {*} obj 普通对象
     * @return [proxy] 代理对象
    */

    function reactive(data) {
      if(!isObject) return

      return new Proxy(data, {
        get(target, key) {
          return target[key]
        },
        set(target, key, value) {
          target[key] = value
          return true
        }
      })
    }
    const state = {name:'孙悟空', age: 18}
    const proxy = reactive(state)
    proxy.name = '猪八戒';
    // 对代理对象进行修改，源对象也会发生改变
    console.log(state)
  </script>
</body>
</html>